
<template>
  <main-container
    :headerText="'消息管理 >> 新增消息 ' + (isEdit ? '编辑' : '添加')"
  >
    <div class="content" :key="showPageKey">
      <div class="edit-wrap">
        <div class="top-input">
          <div class="item">
            <label for> <span class="tips">* </span>标题： </label>
            <div class="inline-block">
              <el-input
                v-model="formData.title"
                placeholder="请输入标题"
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>

          <div class="item">
            <label for> <span class="tips">* </span>类型： </label>
            <div class="inline-block">
              <el-select
                @change="changeType"
                v-model="formData.type"
                style="width: 220px"
                placeholder="请选择类型"
                size="small"
              >
                <el-option
                  v-for="(item, index) in typeOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item" v-if="formData.type == 3">
            <label for> <span class="tips"> </span>阶段： </label>
            <div class="inline-block">
              <el-select
                v-model="formData.stage"
                style="width: 220px"
                placeholder="请选择阶段"
                size="small"
                @change="clearVideoUrl"
              >
                <el-option
                  v-for="(item, index) in stageOpts"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="item img-item" style="margin-bottom: 50px">
            <label for> <span class="tips">* </span>封面图： </label>
            <div class="inline-block">
              <upload-img
                labelName="封面图"
                :imgArrProp="formData.img"
                :countLimit="1"
                @uploadSuccess="handleUpload1"
              />
            </div>
          </div>

          <!-- 内容 学院白问百答 -->
          <!-- <div class="item img-item" >
            <label for> <span class="tips">* </span>内容： </label>
            <div class="inline-block">
              <el-input
                type="textarea"
                v-model="formData.content"
                placeholder="请输入内容"
                size="small"
                :rows="5"
                style="width: 300px; margin-left: -7px"
              ></el-input>
            </div>
          </div> -->

          <div v-if="formData.type != 3">
            <div class="item" v-if="formData.videoUrl">
              <label for> <span class="tips">* </span> 视频链接:</label>
              <div class="inline-block">
                <div class="video-url">
                  <a :href="formData.videoUrl" target="_blank">
                    <div
                      class="ellipsis"
                      style="
                        width: 200px;
                        display: inline-block;
                        vertical-align: -6px;
                      "
                    >
                      {{ formData.videoUrl }}
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <div class="item">
              <label for> <span class="tips">* </span>视频上传： </label>
              <div class="inline-block">
                <el-input
                  v-model="formData.videoUrl"
                  placeholder="请输入视频地址"
                  size="small"
                  style="width: 0; height: 0; display: none"
                ></el-input>

                <a class="plxui_btn_tertiary">
                  <input
                    type="file"
                    id="filed"
                    hidden
                    @change="filePreview"
                    style="display: none"
                  />
                  <span @click="selectFileClick()">+上传视频</span>
                </a>
              </div>
            </div>
          </div>

          <div v-else>
            <div class="item" v-if="formData.videoUrlArr[0].videoUrl">
              <label for> <span class="tips">* </span> 视频链接1:</label>
              <div class="inline-block">
                <div class="video-url">
                  <a :href="formData.videoUrlArr[0].videoUrl" target="_blank">
                    <div
                      class="ellipsis"
                      style="
                        width: 200px;
                        display: inline-block;
                        vertical-align: -6px;
                      "
                    >
                      {{ formData.videoUrlArr[0].videoUrl }}
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <div class="item" v-if="formData.videoUrlArr[1].videoUrl">
              <label for> <span class="tips">* </span> 视频链接2:</label>
              <div class="inline-block">
                <div class="video-url">
                  <a :href="formData.videoUrlArr[1].videoUrl" target="_blank">
                    <div
                      class="ellipsis"
                      style="
                        width: 200px;
                        display: inline-block;
                        vertical-align: -6px;
                      "
                    >
                      {{ formData.videoUrlArr[1].videoUrl }}
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <div class="item" v-if="formData.videoUrlArr[2].videoUrl">
              <label for> <span class="tips">* </span> 视频链接3:</label>
              <div class="inline-block">
                <div class="video-url">
                  <a :href="formData.videoUrlArr[2].videoUrl" target="_blank">
                    <div
                      class="ellipsis"
                      style="
                        width: 200px;
                        display: inline-block;
                        vertical-align: -6px;
                      "
                    >
                      {{ formData.videoUrlArr[2].videoUrl }}
                    </div>
                  </a>
                </div>
              </div>
            </div>

            <div class="item">
              <label for> <span class="tips">* </span>视频1标题： </label>
              <div class="inline-block">
                <el-input
                  v-model="formData.videoUrlArr[0].title"
                  placeholder="请输入标题"
                  size="small"
                  style="width: 220px"
                ></el-input>
              </div>
            </div>
            <div class="item">
              <label for> <span class="tips">* </span>上传视频1： </label>
              <div class="inline-block">
                <a class="plxui_btn_tertiary">
                  <input
                    type="file"
                    id="file_uploads1"
                    hidden
                    @change="fileUpLoadMany"
                    style="display: none"
                  />
                  <span @click="selectFileMany('file_uploads1')"
                    >+上传视频1</span
                  >
                </a>
              </div>
            </div>

            <div class="item">
              <label for> <span class="tips">* </span>视频2标题： </label>
              <div class="inline-block">
                <el-input
                  v-model="formData.videoUrlArr[1].title"
                  placeholder="请输入标题"
                  size="small"
                  style="width: 220px"
                ></el-input>
              </div>
            </div>
            <div class="item">
              <label for> <span class="tips">* </span>上传视频2： </label>
              <div class="inline-block">
                <a class="plxui_btn_tertiary">
                  <input
                    type="file"
                    id="file_uploads2"
                    hidden
                    @change="fileUpLoadMany"
                    style="display: none"
                  />
                  <span @click="selectFileMany('file_uploads2')"
                    >+上传视频2</span
                  >
                </a>
              </div>
            </div>

            <div class="item">
              <label for> <span class="tips">* </span>视频3标题： </label>
              <div class="inline-block">
                <el-input
                  v-model="formData.videoUrlArr[2].title"
                  placeholder="请输入标题"
                  size="small"
                  style="width: 220px"
                ></el-input>
              </div>
            </div>
            <div class="item">
              <label for> <span class="tips">* </span>上传视频3： </label>
              <div class="inline-block">
                <a class="plxui_btn_tertiary">
                  <input
                    type="file"
                    id="file_uploads3"
                    hidden
                    @change="fileUpLoadMany"
                    style="display: none"
                  />
                  <span @click="selectFileMany('file_uploads3')"
                    >+上传视频3</span
                  >
                </a>
              </div>
            </div>

            <div class="item">
              <label for> <span class="tips">* </span>操作： </label>
              <div class="inline-block">
                <el-button @click.stop="clearVideoUrl" size="small"
                  >清空视频</el-button
                >
              </div>
            </div>
          </div>

          <!-- 其他类型 -->
          <div class="item img-item" style="height: 300px">
            <label for> <span class="tips">* </span>内容： </label>
            <div class="inline-block" style="padding-left: 10px">
              <!-- <bg-editor
                :minHeight="180"
                :uploadUrl="formData.uploadApi"
                :content="formData.content"
                @editorData="handleBgEditChange"
              ></bg-editor> -->

              <richTextAssembly
                style="width: 900px"
                @changeSuccess="handleBgEditChange"
                :value="formData.content"
              ></richTextAssembly>
            </div>
          </div>
        </div>
      </div>

      <div class="submit-option">
        <el-button v-if="!isEdit" @click="handleAdd" size="small" type="primary"
          >添加</el-button
        >
        <el-button v-else @click="handleEdit" size="small" type="primary"
          >编辑</el-button
        >
        <el-button @click="handleCancel" size="small" type="primary"
          >取消</el-button
        >
      </div>
    </div>
  </main-container>
</template>


<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import date_edit from "@/components/subEditCon/dateEdit";
import upload_img from "@/components/subEditCon/uploadImgEdit";
import bg_editor from "@/components/bg-editor";

import richTextAssembly from "@/components/richTextAssembly.vue";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    // "input-edit": () => resolve(["@/components/subEditCon/inputEdit"]),
    // "select-edit": () => resolve(["@/components/subEditCon/selectEdit"]),
    "date-edit": date_edit,
    "upload-img": upload_img,
    "bg-editor": bg_editor,
    richTextAssembly: richTextAssembly,
  },
  props: {},
  data() {
    return {
      showPageKey: 119, //刷新的key
      formData: {
        title: "",
        type: "",
        stage: "",
        img: "",
        uploadApi: "API.common.upload",
        videoUrl: "",

        videoUrlArr: [
          {
            id: 1,
            title: "",
            videoUrl: "",
          },
          {
            id: 2,
            title: "",
            videoUrl: "",
          },
          {
            id: 3,
            title: "",
            videoUrl: "",
          },
        ], //多视频保存容器 //加视频标题
      },
      curChuangfuVideoTag: "",

      typeOpts: [
        { value: "1", label: "学院白问百答" },
        { value: "2", label: "最新动态" },
        { value: "3", label: "21天创富" },
        { value: "4", label: "操作教程视频" },
        { value: "5", label: "视频教程" },
      ],
      stageOpts: [
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" },
        { value: "5", label: "5" },
        { value: "6", label: "6" },
        { value: "7", label: "7" },
        { value: "8", label: "8" },
        { value: "9", label: "9" },
        { value: "10", label: "10" },
        { value: "11", label: "11" },
        { value: "12", label: "12" },
        { value: "13", label: "13" },
        { value: "14", label: "14" },
        { value: "15", label: "15" },
        { value: "16", label: "16" },
        { value: "17", label: "17" },
        { value: "18", label: "18" },
        { value: "19", label: "19" },
        { value: "20", label: "20" },
        { value: "21", label: "21" },
      ],

      isEdit: false,
      allMethods: "",
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();

    const id = this.$route.query.id;
    //有id获取编辑数据
    if (id) {
      this.getEditData(id);
      this.isEdit = true;
    }

    // //测试test
    // this.formData.testImgStr = "https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/a3ae8023-d02a-4f3b-9ce5-f5fcd33f1b96.jpg?Expires=1912753798&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=E2EAngZwKqN7QdBBWmUyD5KwZAM%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/bad5ad4d-5c21-443e-86b8-a407dec6b99f.jpg?Expires=1912753798&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=zYE6gfTWbYyP2QUse%2BZqceX3iKU%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/8fdd60e0-77af-4aa1-a82e-3087faf9cbc5.jpg?Expires=1912753798&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=gbXVuVghSP9iEcmMbDV4haKHljU%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/74d2f8ca-564e-4184-af9d-f66f0df36017.jpg?Expires=1912753799&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=0Oru0%2BjoKUNrMVr%2Bjh8rFd1Kqts%3D,https://honcollar.oss-cn-shenzhen.aliyuncs.com/file/1e0280cd-fcab-4103-bf20-1fa7d91dd1c1.jpg?Expires=1912753799&OSSAccessKeyId=LTAI4FyZ6LRvk2FLjYuRQU1N&Signature=sbcX8v22frNg%2BC4rbhqvk6LRAk8%3D";
  },

  methods: {
    /* 清空视频 */
    clearVideoUrl() {
      this.formData.videoUrlArr.forEach((item,index)=> {
        item.title = "";
        item.videoUrl = "";
      })
    },

    //类型变化
    changeType() {
      if (this.formData.type != 4) {
        this.formData.videoUrl = "";
      }
    },

    //添加
    handleAdd() {
      let url = API.news_m.add;

      //非空校验
      if (this.formData.type == 4) {
        var dataRes = jhTools.checkInputFormDataTool({
          tThis: this,
          dataArr: ["title", "type", "content"],
          tipsObj: {
            title: "标题",
            type: "类型",
            content: "内容",
          },
        });
        if (!dataRes) {
          return;
        }
      } else {
        var dataRes = jhTools.checkInputFormDataTool({
          tThis: this,
          dataArr: [
            "title",
            "type",
            "content",
            //"videoUrl",
          ],
          tipsObj: {
            title: "标题",
            type: "类型",
            content: "内容",
            //"videoUrl": "视频地址",
          },
        });
        if (!dataRes) {
          return;
        }
      }

      var {
        title,
        type,
        stage,
        img,
        content,
        videoUrl,
        videoUrlArr,
      } = this.formData;

      //视频添加
      if (this.formData.type == "3") videoUrl = JSON.stringify(this.formData.videoUrlArr);

      let data = {
        title,
        type,
        stage,
        img,
        content,
        videoUrl,
      };
      console.log("参数", data);
      
      jhTools.post(
        url,
        data,
        null,
        (res) => {
          console.log("结果", res);
          if (res.code == "200") {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$router.push({
              path: "/news_m_news_m_table",
              query: {},
            });
          } else {
            this.$message({
              type: "warning",
              message: res.message,
            });
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //获取数据
    getEditData(id) {
      let url = API.news_m.get;
      const param = {
        id,
      };
      console.log("详情", param);
      jhTools.get(
        url,

        param,
        null,
        (res) => {
          console.log("获取数据详情", res);
          if (res.code == 200) {
            let formData = {};
            formData.title = res.data.title ? res.data.title + "" : "";
            formData.type = res.data.type ? res.data.type + "" : "";
            formData.stage = res.data.stage ? res.data.stage + "" : "";
            formData.img = res.data.img ? res.data.img + "" : "";
            formData.content = res.data.content ? res.data.content + "" : "";
            formData.videoUrl = res.data.videoUrl ? res.data.videoUrl + "" : "";
            if (formData.type == "3" && formData.videoUrl) {
              formData.videoUrlArr = JSON.parse(formData.videoUrl);
            }

            for (var itemKey in formData) {
              this.formData[itemKey] = formData[itemKey];
            }
            setTimeout(() => {
              this.showPageKey = 110; //更新视图
            }, 300);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //编辑提交
    handleEdit() {
      if (this.formData.type == 4) {
        //非空校验
        var dataRes = jhTools.checkInputFormDataTool({
          tThis: this,
          dataArr: ["title", "type", "content"],
          tipsObj: {
            title: "标题",
            type: "类型",
            content: "内容",
          },
        });
        if (!dataRes) {
          return;
        }
      } else {
        //非空校验
        var dataRes = jhTools.checkInputFormDataTool({
          tThis: this,
          dataArr: [
            "title",
            "type",
            "content",
            //"videoUrl",
          ],
          tipsObj: {
            title: "标题",
            type: "类型",
            content: "内容",
            //"videoUrl": "视频地址",
          },
        });
        if (!dataRes) {
          return;
        }
      }

      let url = API.news_m.edit;
      let id = this.$route.query.id;

      var {
        title,
        type,
        stage,
        img,
        content,
        videoUrl,
        videoUrlArr,
      } = this.formData;

      //视频编辑
      if (this.formData.type == "3") videoUrl = JSON.stringify(this.formData.videoUrlArr);


      let data = {
        id,
        title,
        type,
        stage,
        img,
        content,
        videoUrl,
      };
      console.log("参数", data);

      jhTools.post(
        url,
        data,
        null,
        (res) => {
          console.log("结果", res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$router.push({
              path: "/news_m_news_m_table",
              query: {},
            });
          } else {
            //提示
            this.$message({
              type: "warning",
              message: res.message,
            });
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //图片上传
    handleUpload1(imgArrStr) {
      this.formData.img = imgArrStr;
    },

    //富文本编辑器
    handleBgEditChange(content) {
      this.formData.content = content;
    },

    //取消返回
    handleCancel() {
      this.$router.go(-1);
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {};
    },

    /* 选择文件点击 */
    selectFileClick: function () {
      document.getElementById("filed").click();
    },

    /* 视频上传 */
    filePreview(e) {
      // console.log(e.target.files[0]);
      let file = e.target.files[0];
      var fileName = file.name || "";
      var ext = fileName.split(".")[fileName.split(".").length - 1];
      if (ext == "mp4" || ext == "avi" || ext == "mov") {
      } else {
        this.$alert("请上传视频为mp4/avi/mov类型的", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
        return;
      }
      this.title = e.target.files[0].name;
      this.videoSize = e.target.files[0].size / 1024 / 1024;
      //视频上传
      var url = API.common.upload;
      let formdata = new FormData();
      formdata.append("file", file);
      jhTools.post(url, formdata, null, (res) => {
        console.log("结果", res);
        if (res.code == "200") {
          console.log("上传成功");
          this.$message({
            type: "success",
            message: "上传成功!",
          });
          this.formData.videoUrl = res.data.fullUrl;
        } else {
          this.$message({
            type: "warning",
            message: res.message,
          });
        }
      });
    },

    /* 多个文件合并上传 */
    selectFileMany(idStr) {
      document.getElementById(idStr).click();
      this.curChuangfuVideoTag = idStr;
    },

    /* 多个视频合并上传 */
    fileUpLoadMany(e) {
      // console.log(e.target.files[0]);
      let file = e.target.files[0];
      var fileName = file.name || "";
      var ext = fileName.split(".")[fileName.split(".").length - 1];
      var _this = this;
      // if (ext == "mp4" || ext == "avi" || ext == "mov") {
      // } else {
      //   this.$alert("请上传视频为mp4/avi/mov类型的", "提示", {
      //     confirmButtonText: "确定",
      //     callback: (action) => {},
      //   });
      //   return;
      // }
      this.title = e.target.files[0].name;
      this.videoSize = e.target.files[0].size / 1024 / 1024;
      //视频上传
      var url = API.common.upload;
      let formdata = new FormData();
      formdata.append("file", file);
      jhTools.post(url, formdata, null, (res) => {
        console.log("结果", res);
        if (res.code == "200") {
          console.log("上传成功");
          this.$message({
            type: "success",
            message: "上传成功!",
          });
          switch (this.curChuangfuVideoTag) {
            case "file_uploads1":
              this.formData.videoUrlArr[0].videoUrl = res.data.fullUrl;
              break;
            case "file_uploads2":
              this.formData.videoUrlArr[1].videoUrl = res.data.fullUrl;
              break;
            case "file_uploads3":
              this.formData.videoUrlArr[2].videoUrl = res.data.fullUrl;
              break;
            default:
              break;
          }
        } else {
          this.$message({
            type: "warning",
            message: res.message,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

/* 操作栏相关*/

.content {
  min-height: 100%;
}

.top-option {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  margin: 0 30px;
  padding: 10px 0;

  .left-box {
    padding-left: 30px;
    max-width: 900px;

    .sub {
      float: left;
      width: 200px;
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  .right-box {
    padding-right: 30px;
    // min-width: 300px;

    .sub {
      float: right;
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}

/* 操作栏相关*/

/* 输入*/
.edit-wrap {
  padding: 40px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;

  label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .tips {
    color: #f10215;
  }
  // //标题
  // .title {
  //   height: 46px;
  //   font-size: 14px;
  //   padding-left: 20px;
  //   font-weight: bold;
  //   line-height: 46px;
  // }

  .top-input {
    .item {
      margin-top: 20px;

      &.img-item {
        display: flex;
        flex-direction: row;
        // margin-bottom: -36px;

        .inline-block {
          max-height: 160px;
        }
      }
    }
  }

  //标题描述类
  .title-text {
    font-size: 15px;
    line-height: 22px;
    padding-left: 30px;
  }
}

.submit-option {
  width: 300px;
  padding-top: 80px;
  padding-bottom: 60px;
  padding-left: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

//调整element 样式
.inline-block {
  display: inline-block;
  margin-left: 22px;
  &.id {
    padding-left: 20px;
  }
  el-input {
    width: 20px !important;
  }

  //单项选择
  .radio-box {
    // width: 70px;
    display: inline-block;
    text-align: left;
  }
  .radio-box:nth-child(1) {
    // margin-left: -40px;
  }
}

/* 上传按钮样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 107px;
  height: 107px;
  line-height: 107px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.avatar {
  width: 107px;
  height: 107px;
  display: block;
}

/* 单行省略 */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>